<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-09-26 16:08:42
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2025-03-31 16:49:10
 * @FilePath: \hy-ui\src\views\trainingCenter\components\trainingPlan.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-loading="loading">
    <div class="studyRecord" v-if="active === '1'">
      <div class="trainingPlanMain">
        <div>
          <div class="trainingPlan_top_bar">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="培训记录" name="1"></el-tab-pane>
              <el-tab-pane label="考试记录" name="2"></el-tab-pane>
            </el-tabs>
            <div class="addBtn" v-if="activeName === '1'">
              <el-input v-model="queryParams.planName" placeholder="请输入" size="mini"></el-input>
              <el-button type="primary" size="mini" @click="getList">搜索</el-button>
            </div>
          </div>
          <div class="trainingPlanList" v-if="activeName === '1'">
            <div class="trainingPlanItem" v-for="item in list" :key="item.id" @click="handleDetail(item, '2')">
              <div class="coverImg">
                <img :src="getImg(item.picture)" alt="" />
              </div>
              <div class="infoDetail">
                <div><span>计划名称：</span>{{ item.planName || "--" }}</div>
                <div>
                  <span>计划时间：</span>{{
                    `${initDate(
                      item.startTime,
                      "YYYY-MM-DD"
                    )}&nbsp;至&nbsp;${initDate(item.endTime, "YYYY-MM-DD")}`
                  }}
                </div>
                <div>
                  <span>负责人：</span>{{ item.offlineTrainDirector || "--" }}
                </div>
                <div>
                  <span>培训类型：</span>{{
                    item.trainType === "1"
                    ? "线上培训"
                    : item.trainType === "2"
                      ? "线下培训"
                      : "无培训"
                  }}
                </div>
                <div>
                  <span>考试类型：</span>{{
                    item.examType === "1"
                    ? "线上考试"
                    : item.examType === "2"
                      ? "线下考试"
                      : "无考试"
                  }}
                </div>
              </div>
            </div>
          </div>
          <div v-if="activeName === '2'">
            <div class="trainingPlanItem_exam" v-for="val in list" :key="val.id">
              <div class="left">
                <div class="title_tra">
                  <i class="el-icon-s-order"></i><span>{{ val.title }}</span><span>{{ val.planName }}</span>
                </div>
                <div class="time_tra">
                  <i class="el-icon-time"></i>考试时间：<span>{{`${initDate(val.startTime, "YYYY-MM-DD HH:mm:ss")}&nbsp;&nbsp;至&nbsp;&nbsp;${initDate(val.endTime, "YYYY-MM-DD HH:mm:ss")}`}}</span>
                </div>
              </div>
              <div class="result">
                <span>考试分数</span>
                <span :style="{
                  color:
                    val.rectufyScore <= val.passFraction ? '#F72D2D' : '#2f54eb',
                }">{{ val.rectufyScore }} <span>分</span></span>
              </div>
              <img src="../../../assets/images/qualified.png" alt="" class="qualified"
                v-if="Number(val.rectufyScore) >= Number(val.passFraction)" />
              <img src="../../../assets/images/noQualified.png" alt="" class="qualified"
                v-if="Number(val.rectufyScore) < Number(val.passFraction)" />
            </div>
          </div>
        </div>
        <div class="planNoData" v-if="!list.length" style="width: 100%">
          <img src="../../../assets/images/planNoData.png" alt="" />
          <span>暂无记录</span>
        </div>
      </div>
      <div class="pagination">
        <pagination v-show="total > 0" :page-sizes="[20, 40, 60, 80, 100]" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" :background="false" />
      </div>
    </div>
    <!-- <Courselist v-if="active === '2'" :goBack="handleDetail" /> -->
  </div>
</template>
<script>
// import Courselist from "@/views/trainingCenter/components/courselist";
import { trainRecord, examRecord } from "@/api/trainingCenter";
import moment from "moment";
export default {
  components: {
    // Courselist,
  },
  data() {
    return {
      loading: false,
      active: "1",
      total: 0,
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        planName: undefined,
      },
      list: [],
      activeName: '1'
    };
  },
  async mounted() {
    await this.getList();
  },
  methods: {
    handleClick() {
      this.list = []
      this.queryParams = {
        pageSize: 10,
        pageNum: 1,
        planName: undefined,
      }
      this.getList()
    },
    async getList() {
      this.loading = true;
      const res = this.activeName === '1' ? await trainRecord({ ...this.queryParams }) : await examRecord({ ...this.queryParams })
      this.list = res.data?.list || [];
      this.total = res.data.total;
      this.loading = false;
    },
    getImg(data) {
      let img = undefined;
      if (!!data) {
        img = JSON.parse(data);
      }
      if (img?.length) {
        return img[0].url;
      }
      return require("../../../assets/images/banner1.png");
    },
    initDate(date, format) {
      return moment(date).format(format);
    },
    handleDetail(row, type) {
      //   this.active = type;
    },
  },
};
</script>

<style lang="scss" scoped>
.studyRecord {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f4f4f4;
  padding: 30px 0;
  height: calc(100vh - 135px);

  .pagination {
    width: calc(100% - 720px);
    display: flex;
    justify-content: flex-end;

    ::v-deep .pagination-container {
      width: 100%;
      background: transparent;
      margin-top: 0;

      .el-pager li,
      .btn-prev,
      .btn-next {
        background: transparent;
      }

      .el-input__inner {
        background: transparent;
      }
    }
  }

  .trainingPlanMain {
    width: 1198px;
    background: #ffffff;
    border-radius: 6px;
    padding: 17px 24px;

    .planNoData {
      padding: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      // max-height: 60vh;
      span {
        font-weight: 500;
        font-size: 12px;
        color: #bbbbbb;
        line-height: 48px;
      }
    }

    .chooseCourse {
      .topBar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &>span {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          cursor: pointer;
        }
      }
    }

    ::v-deep .el-tabs__nav-wrap::after {
      display: none;
    }

    .trainingPlan_top_bar {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;
    }

    .addBtn {
      // position: absolute;
      // right: 0;
      // top: 10px;
      display: flex;

      ::v-deep .el-button--primary {
        background: #2f54eb;
        border: none;
        border-radius: 0 3px 3px 0;
        height: 28px;
      }

      ::v-deep .el-input__inner {
        border-radius: 3px 0 0 3px;
      }
    }

    .trainingPlanList {
      width: 100%;
      //   display: grid;
      //   grid-template-columns: 1fr;
      //   grid-column-gap: 11px;
      //   grid-row-gap: 10px;
      //   justify-items: stretch;
      //   align-items: start;
      overflow-y: auto;
      max-height: 65vh;

      .trainingPlanItem {
        &:nth-last-child(1) {
          margin-bottom: 10px;
        }

        cursor: pointer;
        padding: 30px;
        background: #fff;
        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.1);
        border-radius: 10px;
        margin-top: 10px;
        margin-left: 4px;
        margin-right: 4px;
        display: flex;

        &:hover img {
          transform: scale(1.1);
        }

        .infoDetail {
          font-size: 14px;
          color: #666;
          padding: 12px;

          div {
            margin-bottom: 10px;
          }
        }

        .coverImg {
          flex: none;
          width: 30%;
          height: 156px;
          overflow: hidden;
          border-radius: 10px;
          margin-right: 26px;

          img {
            width: 100%;
            height: 100%;
            transition: 1000ms ease all;
          }
        }

        .itemTitle {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 22px;
          color: #333333;
          margin: 0 0 12px 0;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          line-height: 22px;
        }

        .intro {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
          line-height: 22px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }

        .detail {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999;
          margin-top: 12px;

          ::v-deep .el-button--primary {
            background: #2f54eb;
            border: none;
          }

          .detail_info>span {
            margin-right: 12px;
          }
        }
      }
    }
  }
  .trainingPlanItem_exam {
        font-family: Microsoft YaHei;
        font-weight: 400;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f8f8f8;
        border-radius: 10px;
        padding: 24px 30px 33px 24px;
        cursor: pointer;
        margin-bottom: 20px;
        position: relative;
        overflow: hidden;

        .qualified {
          position: absolute;
          bottom: -40px;
          right: -25px;
          z-index: 1;
        }

        &:hover {
          background: #f6f8ff;
        }

        ::v-deep .el-button--primary {
          background: #2f54eb;
          border: none;
        }

        .result {
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;

          &>span {
            font-size: 16px;
            color: #666;
          }

          &>span:nth-of-type(2) {
            color: #2f54eb;
            font-weight: bold;
            font-size: 20px;
            margin-top: 10px;

            span {
              font-size: 18px;
            }
          }
        }

        .left {
          .title_tra {
            display: flex;
            align-items: center;
            margin-bottom: 20px;

            ::v-deep .el-icon-s-order {
              color: #ff4545;
              font-size: 16px;
            }

            &>span:nth-of-type(1) {
              font-size: 18px;
              color: #333333;
              margin-left: 2px;
            }

            &>span:nth-of-type(2) {
              font-size: 14px;
              color: #2f54eb;
              margin-left: 17px;
            }
          }

          .time_tra {
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;

            ::v-deep .el-icon-time {
              color: #909090;
              margin-right: 3px;
            }
          }
        }
      }
}</style>